<template>
  <section>
      <div class="max" >
        <div class="city-text">
          <router-link tag="div" to="/" class="city-swiper">
            <span class="iconfont">&#xe618;</span>
          </router-link>
          <div class="city-select">
            城市选择
          </div>
        </div>
        <div class="city-inpvel">
          <input type="text" placeholder="输入城市名/拼音" v-model="inputval">
        </div>
        <div class="search-keyword" v-show="inputval !=='' "  ref="result">
            <ul>
              <li class="border-bottom" v-for="item of isshow" :key="item.id">{{item.name}}</li>
              <li v-show="isshow.length == 0">没有搜到任何结果</li>
            </ul>
        </div>
      </div>
  </section>

</template>

<script>
import BScroll from 'better-scroll'
export default { //  组件配置项
  name: 'CityHeader',
  props: {
    cities: Object
  },
  data () {
    return {
      inputval: '',
      isshow: []
    }
  },
  mounted () {
    this.scroll = new BScroll(this.$refs.result)
  },
  watch: {
    inputval () {
      // forEach , for in ,for of,for
      let arr = []
      for (let key in this.cities) {
        this.cities[key].forEach((obj, index) => {
          if (obj.spell.indexOf(this.inputval) !== -1 || obj.name.indexOf(this.inputval) !== -1) {
            arr.push(obj)
          }
        })
      }
      this.isshow = arr
    }
  }
}
</script>
<style lang="stylus" scoped="scoped">
  @import '~../../../assets/css/publiccss.styl'
  .max  >>> .iconfont
    font-size 0.4rem
  .max
    width 100%
    padding 0.1rem 0
    background $bgcolor
    position fixed
    .city-text
      margin-bottom 0.2rem
      padding 0.2rem 0
      color white
      font-size 0.35rem
      .city-select
        text-align center
      .city-swiper
        width 0.2rem
        position absolute
    .city-inpvel
      width 95%
      margin 0 auto
      background white
      padding 0.18rem 0
      text-align center
      color silver
      font-size 0.36rem
      font-weight 0
      input
        text-align center
    .search-keyword
      position fixed
      top 2rem
      bottom 0
      left 0
      right 0
      height 100%
      background #EEE
      z-index 2
      overflow hidden
      ul
        li
          background white
          padding 0.23rem 0
          line-height 0.2rem
</style>
